import React from "react";
import {
  addCarItemCount,
  deleteCarItemCount,
  subCarItemCount,
  switchAllCarItemCheck,
  switchCarItemCheck,
} from "../../app/car/carSlice";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { useCar } from "../../hooks";

const Index = () => {
  const data = useAppSelector((state) => state.car.data);
  const dispatch = useAppDispatch();
  const { price, allCheck } = useCar();
  return (
    <div>
      {data.map((v) => {
        return (
          <div key={v.id}>
            <input
              type="checkbox"
              checked={v.isChecked}
              onChange={() => dispatch(switchCarItemCheck(v))}
            />
            <dl>
              <dt>
                <img src={v.url} alt="" />
              </dt>
              <dd>
                <h3>{v.title}</h3>
                <p>
                  {v.price}---{" "}
                  <span onClick={() => dispatch(deleteCarItemCount(v))}>
                    删除
                  </span>{" "}
                </p>
                <p>
                  <button
                    disabled={v.count === 1}
                    onClick={() => dispatch(subCarItemCount(v))}
                  >
                    -
                  </button>
                  <span>{v.count}</span>
                  <button onClick={() => dispatch(addCarItemCount(v))}>
                    +
                  </button>
                </p>
              </dd>
            </dl>
          </div>
        );
      })}
      <div>
        <input
          type="checkbox"
          checked={allCheck}
          onChange={(e) => dispatch(switchAllCarItemCheck(e.target.checked))}
        />
        {price}
      </div>
    </div>
  );
};

export default Index;
